<!-- /components/EditUserInfoModal.vue -->
<template>
	<u-modal :show="visible" @update:show="visible = $event" :title="title" @close="onCancel" @cancel="onCancel"
		closeOnClickOverlay="true" showConfirmButton="true" :showCancelButton="showCancel" @confirm="onConfirm"
		:confirmText="confirmText" :cancelText="cancelText">
		<view class="container">
			<!-- 居中区域，但不强制垂直居中全屏 -->
			<view class="user-info-wrapper">
				<!-- 第一行：头像 -->
				<button class="row avatar-row share-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<u--image :src="imgUrl" width="80px" height="80px" shape="circle" class="avatar"
						:showLoading="true"></u--image>
				</button>

				<!-- 第二行：昵称 + 输入框 -->
				<view class="row nickname-row">
					<!-- 昵称 -->
					<text class="nickname-label">昵称</text>

					<!-- 输入框 -->
					<input type="nickname" class="nickname-input" :value="nickName" placeholder="请输入昵称"
						@input="onInputChange" />
				</view>
			</view>
		</view>

	</u-modal>
</template>

<script setup>
	import {
		ref,
		defineExpose
	} from 'vue'

	import {
		saveHouseUserInfoRequest,
		getHouseUserInfoRequest
	} from '@/request/house.js'

	import {
		uploadWxImage
	} from '@/utils/uploadimage.js'

	// ========== Props ==========
	const props = defineProps({
		title: {
			type: String,
			default: '编辑用户信息'
		},
		showCancel: {
			type: Boolean,
			default: true
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		confirmText: {
			type: String,
			default: '保存'
		},
		maskClosable: {
			type: Boolean,
			default: false
		}
	})

	// ========== 内部状态 ==========
	const visible = ref(false)
	const nickName = ref('')
	const imgUrl = ref('')

	// ========== 事件回调 ==========
	const emit = defineEmits(['confirm', 'cancel'])

	let resolveFn = null
	let rejectFn = null

	const modalTitle = ref(props.title) // 初始值 = props.title
	const modalConfirmText = ref(props.confirmText)
	const code = ref('') // 初始值 = props.title
	const type = ref(0) // 类型  0房间内修改，1创建房间

	const onConfirm = () => {
		const data = {
			nickName: nickName.value,
			imgUrl: imgUrl.value
		}
		if (type.value == 0) {
			saveUserInfo(data);
		}
		emit('confirm', data)
		if (resolveFn) {
			resolveFn({
				confirmed: true,
				data
			})
			clean()
		}
	}

	const onCancel = () => {
		emit('cancel')
		if (rejectFn) {
			rejectFn({
				confirmed: false
			})
			clean()
		}
	}

	const clean = () => {
		resolveFn = null
		rejectFn = null
		nickName.value = ''
		imgUrl.value = ''
		visible.value = false // 隐藏弹窗
	}

	// ========== open 方法 ==========
	const open = (options = {}) => {
		// 合并传入的配置（仅支持部分动态修改）
		// 注意：props 是只读的，不能直接改，这里我们只改本地状态

		// ... 其他字段
		//必须要存在的code
		//两种模式一种是有code 的
		if (options.code) {
			code.value = options.code;
			getHouseUserInfo();
		} else {
			type.value = 1;
			nickName.value = options.nickName
			imgUrl.value = options.imgUrl
		}
		// 显示弹窗
		visible.value = true

		// 返回 Promise
		return new Promise((resolve, reject) => {
			resolveFn = resolve
			rejectFn = reject
		})
	}



	// ========== 业务相关 ==========
	const onInputChange = (e) => {
		nickName.value = e.detail.value;
	}

	const onChooseAvatar = (e) => {
		//这里可能有几种类型后面再处理算了
		uploadWxImage(e.detail.avatarUrl)
			.then((res) => {
				console.log(res.filePath);
				imgUrl.value = res.filePath;
			})
	}
	//保存用户信息
	const saveUserInfo = (data) => {
		if (data.nickName == "") {
			uni.showToast({
				title: "昵称不能为空",
				icon: 'none'
			})
			return;
		}

		saveHouseUserInfoRequest({
			nickName: data.nickName,
			imgUrl: data.imgUrl,
			houseCode: code.value
		}).then((res) => {
			if (res.code == 0) {
				//理论上要存储到本地内存中这里暂时不处理以后需要再处理

			} else {

			}
			console.log('成功', res);
		}).catch((err) => {
			console.error('失败', err);
		});

	}

	//保存用户信息
	const getHouseUserInfo = (data) => {

		getHouseUserInfoRequest({
			code: code.value
		}).then((res) => {
			if (res.code == 0) {
				//理论上要存储到本地内存中这里暂时不处理以后需要再处理
				nickName.value = res.data.nickName;
				imgUrl.value = res.data.imgUrl;
			} else {

			}
			console.log('成功', res);
		}).catch((err) => {
			console.error('失败', err);
		});

	}


	// ========== 暴露方法 ==========
	defineExpose({
		open
	})
</script>

<style>
	/* 容器：不再全屏居中，只保留上边距 */
	.container {
		padding: 40px 20px 20px;
		/* 上40px留白，避免顶头 */
		background-color: #ffffff;
		height: 300px;
	}

	/* 内容块：居中，不撑满 */
	.user-info-wrapper {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		/* 水平居中 */
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		/* 行间距小一点，下边框来分隔 */
	}

	/* 每一行通用样式 */
	.row {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 20px 0;
		/* 上下内边距 */
		border-bottom: 1px solid #eee;
		/* 每行加下边框 */
	}

	/* 最后一行去掉下边框（可选） */
	.row:last-child {
		border-bottom: none;
	}

	/* 第一行：头像 */
	.avatar-row {
		/* 可以稍微加大头像行的 padding */
		background-color: #ffffff;
		border: none;
		/* 确保没有边框 */
	}

	/* 第二行：昵称 + 输入框 */
	.nickname-row {
		gap: 12px;
	}

	/* 昵称样式 */
	.nickname-label {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	/* 输入框样式 */
	.nickname-input {
		flex: 1;
		font-size: 16px;
		color: #666;
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 6px;
		max-width: 200px;
	}

	.nickname-input::placeholder {
		color: #ccc;
	}
	
	.share-btn {
	  background: transparent;
	  padding: 0;
	  margin: 0;
	  border: none;
	  line-height: initial;
	}
	
	/* 隐藏 button 默认样式 */
	.share-btn::after {
	  border: none;
	  display: none;
	}
</style>